<template>
	<view class="whole">
		<scroll-view v-if="gecitext" :scroll-y="true" class="geciposition">
			<view>
				<view @click="qxgeci" class="clone">
					X
				</view>
				<view
						style="width: 100%;height: 100%;"
					>
						<scroll-view 
							ref="lrcView"
							class="lrc-scroll-view"
							:scroll-y="true" 
							:scroll-top="lrcScrollTop"
						>
							<!-- 歌词列表 -->
							<view class="lrc-wrapper" v-show="lyric && lyric.length>0">
								<view
									v-for="(item,index) in lyric"
									:class="{'lrc-active' : index == showlrcIndex }"
									style="font-size: 32rpx;margin-bottom: 30rpx;text-align: center;font-weight: bold;"
								>
								 <!--  substr 删除第11个字符串 -->
									{{item.substr(11)}}
								</view>
							</view>
							
							<view v-show="!lyric || lyric.length <= 0">
								暂无歌词
							</view>
						</scroll-view>
					</view>
					
			</view>
		</scroll-view>
		<view class="imt-audio">
			<!-- #ifdef H5||MP-WEIXIN -->
			<!-- 季进度条 -->
			<view class="audio-wrapper">
				<view class="audio-number">{{format(current)}}</view>
				<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
				 @change="audio.seek($event.detail.value)"></slider>
				<view class="audio-number">{{format(duration)}}</view>
			</view>
			<!-- #endif -->
			<!-- 图表部分 -->
			<view class="audio-control-wrapper" :style="{color}">
				<view v-show="dqxh" class="audio-control-switch1" @click="xunhuan">
					<image src="../../static/xunhuan.png" class="audio-icon"></image>
				</view>
				<view v-show="qxdqxh" class="audio-control-switch1" @click="qxxunhuan">
					<image src="../../static/qxxunhuan.png" class="audio-icon"></image>
				</view>
				<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">&#xe601;</view>
				<!-- #ifdef APP-PLUS -->
				<view v-if="control" :style="{borderColor:color}" @click="prev">
					<image src="../../static/shangyiqu.png" class="audio-icon1"></image>
				</view>
				<view v-show="!paused" :style="{borderColor:color}" @click="pause">
					<image src="../../static/pause.png" class="audio-control-switch audio-icon1"></image>
				</view>
				<view v-show="paused" :style="{borderColor:color}" @click="play">
					<image src="../../static/play.png" class="audio-control-switch audio-icon1"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5||MP-WEIXIN -->
				<view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}"
				 @click="audio.paused?play():audio.pause()">{{loading?'&#xe600;':(paused?'&#xe865;':'&#xe612;')}}</view>
				<!-- #endif -->
				<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">&#xe601;</view>
				<view v-show="showgeci" class="audio-control-switch2" @click="geci">
					<image src="../../static/geci.png" class="audio-icon"></image>
				</view>
				<view v-show="shutdowngeci" class="audio-control-switch2" @click="qxgeci">
					<image src="../../static/qxgeci.png" class="audio-icon"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				audio: uni.createInnerAudioContext(),
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				paused: true, //是否处于暂停状态
				loading: false, //是否处于读取状态
				seek: false, //是否处于拖动状态
				dqxh: true, //单曲循环未点击
				qxdqxh: false, //单曲循环点击
				showgeci: true, //歌词未点击
				shutdowngeci: false, //歌词点击
				gecitext: false, //不显示歌词
				//歌词滚动控件
				lrcScrollTop: 0,
				// 滚动的高度
				CustomBar:0,
				//显示第几行歌词
				showlrcIndex: 0,
			}
		},
		props: {
			// http://music.163.com/song/media/outer/url?id=190072.mp3
			src: String, //音频链接
			autoplay: Boolean, //是否自动播放
			looping: Boolean, //是否循环播放
			continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
			control: {
				type: Boolean,
				default: true
			}, //是否需要上一曲/下一曲按钮
			color: {
				type: String,
				default: '#169af3'
			} ,//主色调
			// 播放的状态
			Playflag:String,
			// 音乐的暂停
			stopPlay:Boolean,
			lyric:Array // 歌词的展示
		},
		
		methods: {
			//返回prev事件
			prev() {
				this.$emit('prev')
				uni.showToast({
					title: "上一曲",
					icon: "none"
				});
			},
			//返回next事件
			next() {
				this.$emit('next')
				uni.showToast({
					title: "下一曲",
					icon: "none"
				});
			},
			//格式化时长
			format(num) {
				// 第三种
				
				let t = Number(num)
				if(t >= 0){
					let h = parseInt(t / 3600)
					let m = parseInt(t / 60) - h*60
					let s = parseInt(t) - m*60
					if (h.toString().length == 1){h = '0' + h}
					if (m.toString().length == 1){m = '0' + m}
					if (s.toString().length == 1){s = '0' + s}
					if (h != '00'){
						return h + ":" + m + ":" + s
					}
					else {
						return m + ":" + s
					}
				}
				else {
					return '00:00'
				}
				
				// 第二种
				
				// let m = Math.floor((num / 60) % 60) < 10 ? '0' + Math.floor((num / 60) % 60) : Math.floor((num / 60) % 60);
				// let s = Math.floor(num % 60) < 10 ? '0' + Math.floor(num % 60) : Math.floor(num % 60);
				// // console.log(m,s)
				// return   m + ':' + s == 'NaN:NaN'  ?  '00:00' : m + ':' + s
				
					
				
				// 作者第一种
				
				// let obj = '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
				// 	Math.floor(num % 60)).length) + Math.floor(num % 60)
				// return obj
			},
			
		
			
			//点击播放按钮
			play() {
				//#ifdef H5||MP-WEIXIN
				this.loading = true
				//#endif
				// #ifdef APP-PLUS
				this.paused = false
				//#endif
				this.audio.play()
				  this.$emit('swidthStop',true)
		
			},
			//点击暂停按钮
			// #ifdef APP-PLUS
			pause() {
				this.audio.pause()
				this.paused = true	
			},
			//#endif
			//点击循环播放
			xunhuan() {
				this.audio.loop = true
				this.dqxh = false
				this.qxdqxh = true
				uni.showToast({
					title: "开始单曲循环",
					icon: "none"
				});
			},
			//取消循环播放
			qxxunhuan() {
				this.audio.loop = false
				this.dqxh = true
				this.qxdqxh = false
				uni.showToast({
					title: "关闭单曲循环",
					icon: "none"
				});
			},
			//显示歌词
			geci() {
				this.showgeci = false
				this.shutdowngeci = true
				this.gecitext = true
			},
			//取消歌词
			qxgeci() {
				
				this.showgeci = true
				this.shutdowngeci = false
				this.gecitext = false
			},
		},

          created() {
					if (this.src) {
						this.audio.src = this.src
						this.autoplay && this.play()
					}
					// #ifdef MP-WEIXIN
					this.audio.obeyMuteSwitch = false
					//#endif
					//音频进度更新事件
					this.audio.onTimeUpdate(() => {
						if (!this.seek) {
							this.current = this.audio.currentTime
						}
						if (!this.duration) {
							this.duration = this.audio.duration
						}
					})
					//音频播放事件
					this.audio.onPlay(() => {
						this.paused = false
						this.loading = false
					})
					//音频暂停事件
					this.audio.onPause(() => {
						this.paused = true
						// 监听暂停时间
					   this.$emit('swidthStop',false)
					})
					//音频结束事件
					this.audio.onEnded(() => {
						if (this.continue) {
							this.next()
						} else {
							this.paused = true
							this.current = 0
						}
					})
					//音频完成更改进度事件
					this.audio.onSeeked(() => {
						this.seek = false
					})
				},
				beforeDestroy() {
					this.audio.destroy()
				},
			   watch: {
					src(src, old) {
						this.audio.src = src
						this.current = 0
						this.duration = 0
						if (old || this.autoplay) {
							this.play()
						}
					},
					Playflag(val){
						console.log(val)
					},
					// 监听是否暂停
				    stopPlay(flag){
					  if(!flag){
						  // 停止
						this.audio.pause()
						this.paused = true
					
					  }else{
						  //音频播放事件
						 //#ifdef H5||MP-WEIXIN
						 this.loading = true
						 //#endif
						 // #ifdef APP-PLUS
						 this.paused = false
						 //#endif
						 this.audio.play()
					  }
					},
					current(num){
						  let  lyrics = this.lyric
						  
						  var lrcObj = {};
						      for(var i=0;i<lyrics.length;i++){
						          var lyric = decodeURIComponent(lyrics[i]);
						          var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
						          var timeRegExpArr = lyric.match(timeReg);
						          if(!timeRegExpArr)continue;
						          var clause = lyric.replace(timeReg,'');
						          for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
						              var t = timeRegExpArr[k];
						              var min = Number(String(t.match(/\[\d*/i)).slice(1)),
						                  sec = Number(String(t.match(/\:\d*/i)).slice(1));
						              var time = min * 60 + parseFloat(sec);
						              lrcObj[time] = clause;
						          }
						 }
						let arr = []
						for(var key in lrcObj ){
							arr.push(key)
						}
						
						this.showlrcIndex = arr.findIndex(item => item  >= num  ) -1
						
					
			        	this.lrcScrollTop = this.showlrcIndex * (this.showlrcIndex + 10)
						
						console.log(arr)
						
					}
				}
		}
</script>

<style>
	@font-face {
		font-family: 'icon';
		src: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/1c90d860-2a35-11eb-899d-733ae62bed2f.eot');
		src: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/1c90d860-2a35-11eb-899d-733ae62bed2f.eot?#iefix') format('embedded-opentype'),
			url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/1bbebb50-2a35-11eb-8a36-ebb87efcf8c0.woff2') format('woff2'),
			url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/892b6d50-2a35-11eb-97b7-0dc4655d6e68.woff') format('woff'),
			url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/ab0559e0-2a35-11eb-b680-7980c8a877b8.ttf') format('truetype'),
			url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hjinhmzy11qaa4ebe2/e2502ab0-2a35-11eb-b997-9918a5dda011.svg#iconfont') format('svg');
	}
	.lrc-scroll-view{
		width: 100%;
		height: 100%;
		position: absolute;
		
	}
	/* 歌词激活样式 */
	/* 歌词激活样式 */
	.lrc-active{
		color: #c678db;
	}
	/* 关闭歌词样式 */
	.clone{
		position: fixed;
		right: 10rpx;
		top: 10rpx;
		color: red;
		z-index: 33;
	}

	.imt-audio {
		width: 100%;
		padding: 30upx 0;
		border-radius: 20upx;
	}

	.audio-wrapper {
		display: flex;
		align-items: center;
	}

	.audio-number {
		width: 120upx;
		font-size: 24upx;
		line-height: 1;
		color: #333;
		text-align: center;
	}

	.audio-slider {
		flex: 1;
		margin: 0;
	}

	.audio-control-wrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "icon" !important;
	}

	.audio-control {
		font-size: 32upx;
		line-height: 1;
		border: 4upx solid;
		border-radius: 50%;
		padding: 16upx;
	}

	.audio-control-next {
		transform: rotate(180deg);
	}

	.audio-control-switch {
		font-size: 40upx;
		margin: 0 80upx;
	}

	.audio-control-switch1 {
		font-size: 40upx;
		margin-right: 80upx;
		/* margin: 0 50upx; */
	}

	.audio-control-switch2 {
		font-size: 40upx;
		margin-left: 80upx;
		/* margin: 0 50upx; */
	}

	.audio-icon {
		width: 50upx;
		height: 50upx;
	}

	.audio-icon1 {
		width: 85upx;
		height: 85upx;
	}

	.audioLoading {
		animation: loading 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes loading {
		to {
			transform: rotate(360deg);
		}
	}
/* 弹框样式 */
	.geciposition {
		/* #ifdef APP-PLUS */
		margin-top: 38upx;
		/* #endif */
		width: 88%;
		height: 720upx;
		position: fixed;
		font-size: 31upx;
		color: black;
		border-radius: 15rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding: 10rpx;
		top: 70upx;
		    background: rgba(244, 243, 244, 0.18);
		    box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
		      0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
		      0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
		    backdrop-filter: blur(10px);
		z-index: 22;
			
	}

	.whole {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
